<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改小说信息</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body class="layui-bg-gray">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md8 layui-col-lg-offset2" style="margin-top: 40px;">
                <div class="layui-card">
                    <div class="layui-card-header">小说信息编辑</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="">
                            <div class="layui-form-item" style="margin-top:15px;">
                                <label class="layui-form-label">小说封面</label>
                                <div class="layui-input-block" style="text-align: center">
                                    <img src="img/斗罗2.jpg" class="layui-upload-img" id="upimg" /><br>
                                    <button type="button" name="btnaddphoto" class="layui-btn layui-btn-normal"
                                        id="uptest">上传小说封面</button>
                                </div>
                            </div>
                            <div class="layui-form-item" style="margin-top:15px;">
                                <label class="layui-form-label">小说标题</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="text" name="username" lay-verify="required"
                                        placeholder="请输入您所创建的小说名" autocomplete="off">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">小说分类</label>
                                <div class="layui-input-block">
                                    <select name="city" lay-verify="required">
                                        <option value="1">玄幻</option>
                                        <option value="4">武侠</option>
                                        <option value="5">都市</option>
                                        <option value="2">仙侠</option>
                                        <option value="3">奇幻</option>
                                        <option value="6">历史</option>
                                        <option value="7">军事</option>
                                        <option value="8">科幻</option>
                                        <option value="9">灵异</option>
                                        <option value="10">体育</option>
                                        <option value="11">言情</option>
                                        <option value="12">穿越</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">小说简介</label>
                                <div class="layui-input-block">
                                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item" style="text-align: center">
                                <a href="" class="layui-btn">下一步</a>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="layui-footer" style="text-align: center;height: 60px;">
        <p style="line-height: 60px;color: white;">Copyright © 2019 - Software Technology from
            <a href="http://www.yngsxy.net/" title="云南工商学院" style="color: white">云南工商学院</a></p>
    </div>

    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
        //Demo
        layui.use('form', function () {
            var form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>
    <script>
        //图片上传
        layui.use('upload', function () {
            var $ = layui.jquery,
                upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#uptest',
                url: 'fileupload.do?path=' + ${ loginuser.userid } + '//' + $().val(),
                before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#upimg').attr('src', result); //图片链接（base64）
                    });

                },
                done: function (res) {
                    $('#photoname').val(res.result1);
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                },
                error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</ a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
        });
    });
    </script>
</body>

</html>